<template>
  <div id="content-box" v-if="!isDetail">
    <div class="menu">
      <el-icon @click="scrollToLeft"><ArrowLeft /></el-icon>
      <!--  滚动条  -->
      <el-scrollbar
          ref="scrollbarRef"
          always
          @scroll="scroll"
      >
        <div class="scrollbar-flex-content">
          <p v-for="item in 50" :key="item" class="scrollbar-demo-item" @click="menuItemClicked(item)">
            {{ item }}
          </p>
        </div>
      </el-scrollbar>
      <el-icon @click="scrollToRight"><ArrowRight /></el-icon>
    </div>
    <!-- 新闻列表  -->
    <el-row style="padding: 10px" :gutter="10">
      <el-col
          v-for="(item, index) in cardConfig.data"
          :key="index"
          :span="cardConfig.span"
      >
        <div @click="cardClick(index)" class="card">
          <div class="card-top">
            <div class="news-title">{{item.title}}</div>
            <div class="news-content">
              <img class="news-img" :src="item.image" alt="">
              <div class="news-content-des">{{item.content}}</div>
            </div>
          </div>
          <div class="card-footer">
            <div class="news-time">{{item.time}}</div>
            <div class="news-more">
              <span>更多</span>
              <el-icon><Right /></el-icon>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
  <div id="content-box" v-else>
    <el-page-header @back="goBack">
      <template #content>
        <span class="text-large font-600 mr-3"> 新闻详情 </span>
      </template>
    </el-page-header>
    <div v-html="info.contentH5"></div>
  </div>
</template>

<script>
export default {
  name: "work-news",
  components:{

  },
  data() {
    return {
      // 卡片配置数据：适用于卡片高度一致
      cardConfig:{
        // 数据源
        data:[],
        // 列间隔
        gutter:10,

        // 多少列
        totalColum:2,
        // 每列占据的份额
        span:12,
      },

      isDetail:false,
      info:{}
    }
  },
  created() {
    this.uploadDataReq()
  },
  mounted() {

  },
  methods:{
    uploadDataReq() {
      let cardDatas = []
      for (let i= 0; i < 10; i += 1) {
        let cardObj = {
          title:'为什么移动网站越来越受欢迎',
          content:'网站是企业线上的门店，也是品牌形象的代表，通过网站企业可以做企业营销，也可以提供相关的展品展示内容传达相关的最新企业信息，甚至一些电子商务类网站还可以进行线上交易。网站的重要性不言而喻，因此，我们对网站的要求也就会越来越高，其中比较重要的就是网站打开速度。',
          time:'2018-09-13 16:02:12',
          image:"https://t7.baidu.com/it/u=27018761,936335273&fm=193&f=GIF",
          contentH5:"<p>互联网发展十分迅速，移动端网络也随着发展非常快，而且现在智能手机的普及，更多的用户可能都会利用移动端搜索需要的内容，这也是为什么现在<strong>移动网站</strong>越来越受欢迎的主要原因。那么对于企业来说搭建移动网站有哪些好处呢？</p>\r\n\r\n<p style=\"text-align: center;\"><img alt=\"为什么移动网站越来越受欢迎\" src=\"https://www.lenxen.com/uploadfiles/article/2018/0825/1808250333502660.jpg\" title=\"为什么移动网站越来越受欢迎\" width=\"500\" /></p>\r\n\r\n<p style=\"text-align: center;\">为什么移动网站越来越受欢迎</p>\r\n\r\n<p>移动网站其实也正是当下互联网营销模式最为主要的一种方法，企业开拓移动网站可以更好的拓展线上用户，让企业最大化的吸引客户并成交，企业搭建移动网站的好处主要体现在以下几个方面。</p>\r\n\r\n<p><b>第一，与PC端网站进行互补。</b></p>\r\n\r\n<p>企业PC端网站制作一般来说算是比较复杂的，而且可能会有移动网站中无法承载的Flash动画，JS效果等。但是PC端网站无法满足用户随时随地的进行访问网站。而移动网站正好弥补了这个缺陷。用户可以利用任何一个可利用的移动终端访问网站，相对于PC端，移动网站更加小巧，加载速度更快，所占用的资源更小，很大程度上与PC端进行了互补。</p>\r\n\r\n<p><b>第二，更好的宣传企业。</b></p>\r\n\r\n<p>使用移动网站能够将用户的碎片时间利用起来，如果移动网站优化做的好，能够让网站更好的展现在移动端，那么用户利用零碎时间可以搜索到企业相关信息，那么企业的品牌信息就会更大程度上得到宣传。</p>\r\n\r\n<p><b>第三，更适合当下发展趋势。</b></p>\r\n\r\n<p>现在移动端的大数据已经显示，更多的用户都会选择移动网站，更符合现代化的推广理念。</p>\r\n\r\n<p><b>第四，更利用户体验。</b></p>\r\n\r\n<p>针对移动网站，主要就是做用户体验，而现在的搜索引擎对用户体验较好的网站都会有不错的排名，这也是为什么移动网站更受欢迎的原因之一。</p>\r\n\r\n<p><b>第五，搜索引擎的优势。</b></p>\r\n\r\n<p>国内的搜索引擎，现在移动端的转化比PC还要好，而且现在搜索引擎在一定程度上要求客户必须要有移动网站才可以推广，可见现在的移动网站重要性。</p>\r\n\r\n<p>以上就是为什么现在移动网站越来越受欢迎的介绍，移动网站是趋势，也是我们站长也必须要掌握的内容。</p>\r\n\r\n<p><b>五、搜索引擎的优势：</b></p>\r\n\r\n<p>目前百度推广和360推广，手机的转换率比PC还好，百度推广都强制要求客户制作手机网站后才能推广。可想，手机网站的重要性。</p>\r\n\r\n<p>随着移动设备的日益普遍，移动网站的重要性也会随之增加，移动网站也将会成为未来的发展趋势。所以作为企业来说，移动网站会让企业受益良多。</p>\r\n",
        }
        cardDatas.push(cardObj);
      }
      this.cardConfig.data = cardDatas;
    },

    cardClick(index) {
      console.log('当前点击卡片索引：', index)
      let info = this.cardConfig.data[index];
      this.info = info;
      this.isDetail = true;
    },

    goBack() {
      this.info = {};
      this.isDetail = false;
    },

    scrollToLeft() {
      console.log('往左滑动');
      this.$refs.scrollbarRef.setScrollLeft(0);
    },

    scrollToRight() {
      console.log('往右滑动');
      let right = this.getScrollContentWidth();
      this.$refs.scrollbarRef.setScrollLeft(right);
    },

    /**
     * 滚动视图滚动位置
     * @param value
     */
    scroll(value) {
      console.log('滚动位置：', value);
    },

    /**
     * 单个菜单item点击事件
     */
    menuItemClicked(index) {
      let scrollViewWidth = this.getScrollViewWidth();
      console.log('scrollViewWidth:', scrollViewWidth);

      // 选中item宽度
      let selectedWidth = 100;
      let itemGap = 20;

      // 当前点击item的右侧位置
      let maxX = this.getTotalWidthByEndIndex(index);

      // 目标视图内容宽度
      let contentSizeW = this.getScrollContentWidth();

      let baseSvCenterX = scrollViewWidth / 2;

      // 目标滑动视图
      let scrollView = this.$refs.scrollbarRef;

      let itemX =  maxX - selectedWidth - itemGap;
      if (itemX <= baseSvCenterX) {
        // 点击item的左侧还没到屏幕中心 滚动视图回到起始位置
        console.log('滚动到最左侧');
        this.scrollToLeft()
      } else if (maxX >= contentSizeW - baseSvCenterX) {
        // 如果点击的item右侧已经超出了屏幕的中心 把屏幕外的内容移入
        let value = contentSizeW - scrollViewWidth;
        scrollView.setScrollLeft(value);
        console.log('maxX >= contentSizeW - baseSvCenterX');
      } else {
        // 往屏幕中间显示
        // item如果在屏幕中间显示的横坐标
        let offsetX = (scrollViewWidth - selectedWidth) / 2;
        let value = maxX - selectedWidth - offsetX;
        scrollView.setScrollLeft(value);
        console.log('往屏幕中间显示');
      }
    },

    /**
     * 获取滚动视图自身宽度:组件的实际宽度 不包含边框和滚动条部分
     */
    getScrollViewWidth() {
      let scrollView = this.$refs.scrollbarRef;
      let w = 0;
      if (scrollView) {
        w = scrollView.$el.clientWidth;
      }
      return w;
    },

    /**
     * 截止到当前点击的item 总计宽度值(可以循环 获取每个item的动态宽度)
     * @param endIndex
     */
    getTotalWidthByEndIndex(endIndex) {
      let itemW = 100;
      let gap = 20;
      let total = endIndex;
      let w = itemW * total + gap * (total - 1);
      return w;
    },

    /**
     * 获取滑动视图内容宽度 - 对应scrollView的contentSize.width
     */
    getScrollContentWidth() {
      let itemW = 100;
      let gap = 20;
      let total = 50;
      let w = itemW * total + gap * (total - 1);
      return w;
    }
  }
}
</script>

<style scoped lang="scss">

.card {
  // 使得放大效果更加平滑
  transition: transform 0.3s ease-in-out;
  margin-bottom: 10px;
  padding: 0;
  border: 1px solid #ededed;
}

.card-top {
  padding: 15px 10px;
}

.news-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.news-content {
  display: flex;
}

.news-img {
  margin-right: 6px;
  width: 120px;
  height: 80px;
}

.news-content-des {
  font-size: 13px;
}

.card-footer {
  padding: 5px 15px;
  box-sizing: border-box;
  background-color: #f8f8f8;
  display: flex;
  justify-content: space-between;
}

.news-time {
  font-size: 13px;
}

.news-more {
  font-size: 13px;
  align-items: center;
  display: flex;
  align-items: center;
}

.card:hover {
  // 鼠标放上去 放大到原始大小的1.1倍
  transform: scale(1.02, 1.02);
  // margin-top: -5px;
  border-color: #F56C6C;
}

.menu {
  display: flex;
  align-items: center;
}

// 横向滑动视图
.scrollbar-flex-content {
  display: flex;
}

.scrollbar-demo-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  // 单个item的宽度
  width: 100px;
  height: 50px;
  margin: 10px;
  text-align: center;
  border-radius: 4px;
  background: var(--el-color-danger-light-9);
  color: var(--el-color-danger);
}
</style>
